<template>
  <div id="message">
    <el-button type="primary" icon="el-icon-plus">新增随访</el-button>
    <el-row class="title el_t_20">
      <el-col :span="2" class="title-tag">随访状态</el-col>
      <el-col :span="22" class="title-right">
        <el-col :span="5">计划随访日期</el-col>
        <el-col :span="10">随访类型</el-col>
        <el-col :span="5">实际随访日期</el-col>
        <el-col :span="4">随访人</el-col>
      </el-col>
    </el-row>
    <template v-for="(item,index) in list">
      <el-row class="list">
        <el-col :span="2" class="text-right title-tag" style="padding: 10px 0;">
          <span class="state" :class="{active:item.state===1}" v-html="item.state===1?'待随访':'已随访'"></span>
        </el-col>
        <el-col :span="22" class="line title-right" :class="{active:item.state===1}">
          <el-col :span="5">{{item.date}}</el-col>
          <el-col :span="10">{{item.type}}</el-col>
          <el-col :span="5">{{item.time}}</el-col>
          <el-col :span="4">{{item.name}}</el-col>
          <el-col :span="24">
            <el-input type="textarea" placeholder="暂无随访" v-model="item.remark" :rows="3"></el-input>
          </el-col>
          <el-col :span="24" v-if="item.state===1">
            <el-button type="primary" plain size="mini">查看/编辑</el-button>
            <el-button type="primary" plain size="mini">取消随访</el-button>
          </el-col>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      list: [
        {
          state: 1,
          date: "2018.11.12",
          type: "来院邀约随访",
          time: "-",
          name: "皮卡丘",
          remark: ""
        },
        {
          state: 2,
          date: "2018.11.12",
          type: "来院邀约随访",
          time: "2018.10.12",
          name: "皮卡丘",
          remark:
            "电话联系，通知对方解读学商报告，表示最近很忙，下次来之前会提前预约。"
        },
        {
          state: 2,
          date: "2018.11.12",
          type: "来院邀约随访",
          time: "2018.10.12",
          name: "皮卡丘",
          remark: "电话未接通"
        }
      ]
    };
  }
};
</script>

<style scoped>
#message {
  height: 100%;
  background: #ffffff;
  padding: 20px;
  font-size: 14px;
}

.title {
  color: #999999;
  padding-bottom: 10px;
}

.state {
  padding-right: 34px;
  color: #006835;
  font-weight: bold;
}

.state.active {
  color: #ff0000;
}

.list .el-col {
  padding: 5px 0;
  position: relative;
}

.line {
  font-weight: bold;
}

.line:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #006835;
  position: absolute;
  left: -15px;
  top: 20px;
}

.line:after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background: #006835;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: absolute;
  left: -19px;
  top: 15px;
}

.line.active:after {
  background: #ff0000;
}

.title-tag {
  width: 100px;
}
.title-right {
  width: calc(100% - 100px);
}
</style>
